<!--
 * @Author: zhanghan
 * @Date: 2020-04-18 13:23:11
 * @LastEditors: zhanghan
 * @LastEditTime: 2020-04-18 14:52:46
 * @Descripttion: 
 -->
<template>
  <div>
    <h1>基础知识演示</h1>
    <div>
      <h1>(一) v-text 和 v-html</h1>

      <h2 v-text="message"></h2>
      <!-- 简写方式 -->
      <h2>v-text简写：{{message}}</h2>

      <h2 v-html="message"></h2>

    </div>
    <div>
      <h1>(二) v-if 和 v-show</h1>

      <h2 v-if="yes">Yes!</h2>

      <h2 v-if="no">No!</h2>
      <h2 v-else>Yes!</h2>

      <h2 v-show="age >= 25">Age: {{ age }}</h2>
      <h2 v-show="name.indexOf('jack') >= 0">Name: {{ name }}</h2>

    </div>
    <div>
      <h1>(三) v-for指令</h1>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Sex</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in people" :key="index">
            <td>{{ item.name  }}</td>
            <td>{{ item.age  }}</td>
            <td>{{ item.sex  }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div>
      <h1>(四) v-bind指令</h1>
      <div v-bind:class="{active:isActive}">样式绑定</div>
      <div :class="{active:isActive}">样式绑定（v-bind简写）</div>
    </div>
    <div>
      <h1>(五) v-on指令</h1>
      <el-button v-on:click="say('你好')">点击弹出你好</el-button>
      <el-button @click="say('你好')">点击弹出你好（v-on简写）</el-button>
    </div>
    <div style="margin-bottom:20px">
      <h1>(六) v-model 指令</h1>
      <input type="text" v-model='name'>
      <span>实时显示的值：{{name}}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '<button>Hello</button> Vue!',

      yes: true,
      no: false,
      age: 28,
      name: 'mick',

      people: [
        {
          name: 'Jack',
          age: 30,
          sex: 'Male'
        },
        {
          name: 'Bill',
          age: 26,
          sex: 'Male'
        },
        {
          name: 'Tracy',
          age: 22,
          sex: 'Female'
        },
        {
          name: 'Chris',
          age: 36,
          sex: 'Male'
        }
      ],

      isActive: true
    }
  },
  created() {
    console.log('组件实例化完毕，但页面还未显示')
  },
  mounted() {
    console.log('组件挂载后，此方法执行后，页面显示')
  },

  methods: {
    test() {
      this.changeVal = '我已经被改变'
    },
    say(msg) {
      alert(msg)
      // this.$message('msg');
    }
  }
}
</script>

<style>
.active {
  background: red;
  margin: 10px;
}
</style>
